import React from 'react'
import type { WechatUserInfo } from '@/types/wechat.ts'

/**
 * 用户信息展示组件
 */
interface Props {
  userInfo: WechatUserInfo
  onLogout: () => void
  onRefresh: () => void
}

const UserProfile: React.FC<Props> = ({ userInfo, onLogout, onRefresh }) => {
  if (!userInfo) return null

  return (
    <div className="user-card">
      <img
        src={userInfo.headimgurl || '/default-avatar.png'}
        alt="用户头像"
        className="user-avatar"
        onError={(e) => {
          (e.currentTarget as HTMLImageElement).src = '/default-avatar.png'
        }}
      />
      <div className="user-name">{userInfo.nickname || '微信用户'}</div>
      <div className="user-info">
        {userInfo.city && userInfo.province && <div>📍 {userInfo.province} {userInfo.city}</div>}
        {typeof userInfo.sex !== 'undefined' && (
          <div>👤 {userInfo.sex === 1 ? '男' : userInfo.sex === 2 ? '女' : '未知'}</div>
        )}
      </div>

      <div style={{ marginTop: '20px', display: 'flex', gap: '10px', width: '100%' }}>
        <button className="auth-button" onClick={onRefresh} style={{ flex: 1, fontSize: '14px', padding: '10px' }}>
          刷新信息
        </button>
        <button
          className="auth-button"
          onClick={onLogout}
          style={{ flex: 1, fontSize: '14px', padding: '10px', background: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)' }}
        >
          退出登录
        </button>
      </div>
    </div>
  )
}

export default UserProfile
